<script setup lang="ts">


interface TodoItem {
  id: number
  text: string
  completed: boolean
}

const props = defineProps<{
  todos: TodoItem[]
  editingId: number | null
  editingText: string
}>()

const emits = defineEmits<{
  (e: 'update:editingText', value: string): void
  (e: 'toggle-todo', id: number): void
  (e: 'delete-todo', id: number): void
  (e: 'start-edit', todo: TodoItem): void
  (e: 'save-edit', id: number): void
}>()

const toggleTodo = (id: number) => {
  emits('toggle-todo', id)
}

const deleteTodo = (id: number) => {
  emits('delete-todo', id)
}

const startEdit = (todo: TodoItem) => {
  emits('start-edit', todo)
}

const saveEdit = (id: number) => {
  emits('save-edit', id)
}

const handleInputChange = (value: string) => {
  emits('update:editingText', value)
}
</script>

<template>
  <ul class="todo-list">
    <li v-for="todo in todos" :key="todo.id" class="todo-item">
      <div class="todo-content">
        <input
          type="checkbox"
          :checked="todo.completed"
          @change="toggleTodo(todo.id)"
          class="todo-checkbox"
        />
        <div @dblclick="startEdit(todo)">
          <input
            v-if="editingId === todo.id"
            :value="editingText"
            @input="(e) => handleInputChange((e.target as HTMLInputElement).value)"
            @keyup.enter="saveEdit(todo.id)"
            @blur="saveEdit(todo.id)"
            class="edit-input"
            autofocus
          />
          <span v-else :class="{ completed: todo.completed }">
            {{ todo.text }}
          </span>
        </div>
      </div>
      <button @click="deleteTodo(todo.id)" class="delete-button delete-btn">删除</button>
    </li>
  </ul>
</template>

<style scoped>
.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  margin: 8px 0;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.todo-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #495057;
}

.edit-input {
  border: none;
  border-bottom: 1px solid #e9ecef;
  padding: 4px;
  font-size: 14px;
  width: 100%;
}

.delete-button {
  background: none;
  border: none;
  color: #868e96;
  padding: 4px 8px;
  cursor: pointer;
}

.completed {
  color: #adb5bd;
  text-decoration: line-through;
}

.todo-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* 调整完成状态样式 */
.completed {
  color: #95a5a6;
  text-decoration-color: #42b883;
}

/* 响应式优化 */
@media (min-width: 1024px) {
  .todo-item {
    padding: 20px;
  }
}
</style>
